<div class="row">
    <div class="col-sm-12">
        <div class="card m-b-30">
            <div class="card-body">
                <p class="text-muted m-b-30 font-14">
                    Add a new scope.
                </p>
                <h3 class="m-b-30 text-center"
                    [ngClass]="{ 'd-none': i !== wizardStepIndex }"
                    *ngFor="let step of apiResourceSteps; let i = index">
                    Step {{ wizardStepIndex + 1 }} of {{ apiResourceSteps.length }} - {{ step.title }}
                </h3>
                <form class="needs-validation"
                      [ngClass]="{ 'was-validated': hostFormValidated }"
                      [formGroup]="form"
                      novalidate
                      #ngForm="ngForm">
                    <ng-template wizardStepHost></ng-template>
                    <div class="form-group">
                        <div>
                            <button type="button"
                                    class="btn btn-secondary m-r-5"
                                    *ngIf="canGoBack"
                                    (click)="goToPreviousStep()">
                                Previous Step
                            </button>
                            <button type="button"
                                    class="btn btn-primary m-r-5"
                                    *ngIf="canGoFront"
                                    (click)="goToNextStep()">
                                Next Step
                            </button>
                            <button type="submit"
                                    class="btn btn-primary"
                                    *ngIf="isSummaryStep"
                                    (click)="saveApiResourceScope()">
                                Save
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>